

import * as THREE from 'three';
import {OrbitControls} from '../../../node_modules/three/examples/jsm/controls/OrbitControls.js' 
import TWEEN from '../../../node_modules/three/examples/jsm/libs/tween.module.js';
import LineAnimate from './line_animate.js';
import circleAnimate from './circle_animate.js';
import pointAnimate from './point_animate.js';
import showPoint from  './show_Points.js';
import showText from './show_text.js';
import textLabel  from './textLabel.js';

const dpr = window.devicePixelRatio
const scene = new THREE.Scene();
const uiscene=new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

camera.position.set(0,0,10);
scene.add(camera);

const uiCamera = new THREE.OrthographicCamera(
    window.innerWidth / -2, 
    window.innerWidth / 2, 
    window.innerHeight / 2, 
    window.innerHeight / -2, 1, 1000)
uiCamera.position.z = 1000
uiscene.add(uiCamera);

let xdir = new THREE.Vector3( 1, 1, 1 );
// const ydir = new THREE.Vector3( 0, 1, 0 );
// const zdir = new THREE.Vector3( 0, 0, 1 );
xdir.normalize();
const origin = new THREE.Vector3( 0, 0, 0 );
const length = 50;
const xhex = 0xff0000;

let xarrowHelper = new THREE.ArrowHelper( xdir, origin, length, xhex );
uiscene.add( xarrowHelper )

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio(window.devicePixelRatio);
//renderer.setClearColor(new THREE.Color(0,0,0), 1)
//renderer.setClearColor(0x000000, 0); // 设置背景透明
renderer.shadowMap.enabled = true
renderer.autoClear = false

document.getElementById("threeConter").appendChild( renderer.domElement );

const controls = new OrbitControls(camera, document.getElementById("threeConter"));
//controls.enableRotate=false; //使不旋转

//添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

let pointA = new THREE.Vector3(0,0,0);
let pointB = new THREE.Vector3(5,0,0);
let pointC = new THREE.Vector3(0,5,0);

let Line_AB=new LineAnimate(scene,pointA,pointB,1000);
let Line_BC=new LineAnimate(scene,pointB,pointC,1000);
let Line_CA=new LineAnimate(scene,pointC,pointA,1000);

//Line_AB.start();
// Line_BC.start();
Line_AB.chain(Line_BC.chain(Line_CA)).start();//顺序调用
//Line_AB.chain(Line_BC,Line_CA).start();//AB画完后BC和CA并行调用

let circle_1=new circleAnimate(scene,pointA,5,5,0,Math.PI+0.027,2000);

let point_1=new pointAnimate(scene,pointC,pointB,new THREE.Color(1,1,0),0.5,2000);
point_1.start();

/*创建点组*/
const positions = [];
const colors = [];
positions.push( 2, 2, 0 );
positions.push( 2, 0, 0 );
positions.push( 0, 2, 0 );
colors.push( 1, 0, 0 );
colors.push( 1, 1, 0 );
colors.push( 0, 1, 0 );

let a=new showPoint(scene,positions,colors,0.2);

//Text test
let pos=new THREE.Vector3(1000,0,0);
let text=new showText(scene,pos,"你好",new THREE.Color(1,1,0),2.2);

let label1=new textLabel('请在平面网格上放置8个箱子，放完后点击提交按钮.',20, 100,'#FF0000',30,false,false,uiCamera);
uiscene.add(label1);

function render() {
    TWEEN.update();
    //
    
    renderer.clear();
    renderer.render( scene, camera );
    renderer.clearDepth();
    renderer.render( uiscene, uiCamera );
    //渲染下一帧的时候就会调用render函数
    requestAnimationFrame(render);
}
    
render();
